<script lang="ts" setup>
// 本月数据卡片组件
interface MonthlyDataType {
  totalCount: number
  completedCount: number
  pendingCount: number
  averageTime: string
}

interface Props {
  data: MonthlyDataType
}

const props = defineProps<Props>()
</script>

<template>
  <view class="mb-8">
    <view class="mb-3 px-4">
      <text class="text-base font-medium">本月数据</text>
    </view>
    <view class="grid grid-cols-2 gap-3 px-4">
      <view class="border border-[#DBEAFE] rounded-lg from-[#EFF6FF] to-[#DBEAFE] bg-gradient-to-br p-4">
        <text class="text-2xl text-[#3B82F6] font-bold">{{ data.totalCount }}</text>
        <text class="text-xs text-gray-600">总审批数</text>
      </view>
      <view class="border border-[#DCFCE7] rounded-lg from-[#F0FDF4] to-[#DCFCE7] bg-gradient-to-br p-4">
        <text class="text-2xl text-[#22C55E] font-bold">{{ data.completedCount }}</text>
        <text class="text-xs text-gray-600">已完成</text>
      </view>
      <view class="border border-[#FEF3C7] rounded-lg from-[#FFFBEB] to-[#FEF3C7] bg-gradient-to-br p-4">
        <text class="text-2xl text-[#F59E0B] font-bold">{{ data.pendingCount }}</text>
        <text class="text-xs text-gray-600">待处理</text>
      </view>
      <view class="border border-[#E0F2FE] rounded-lg from-[#F0F9FF] to-[#E0F2FE] bg-gradient-to-br p-4">
        <text class="text-2xl text-[#0EA5E9] font-bold">{{ data.averageTime }}</text>
        <text class="text-xs text-gray-600">平均时长</text>
      </view>
    </view>
  </view>
</template>
